<template>
  <el-container class="custom-form-attr">
    <el-tabs type="border-card" :stretch="true">
      <el-tab-pane label="组件属性">
        <BaseForm ref="CustomFormAttr" :formItemConfigGroup="formItemConfigGroup" />
        <el-button @click="submitForm">保存</el-button>
      </el-tab-pane>
      <el-tab-pane label="表单属性">Config</el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script lang="ts">
import BaseForm from "../base-form.vue";
import { FormType, FormItemConfigGroup, BaseFormComponent } from "@/component-interface";
import { defineComponent } from "vue";
import customFormApi from "@/api/custom-form.api";
export default defineComponent({
  name: "FlowDesignAttr",
  components: { BaseForm },
  data() {
    return {
      attrData: {},
      formItemConfigGroup: [
        {
          label: "名称",
          prop: "nodeName",
          type: FormType.ElInput,
        },
        {
          label: "绑定表单",
          prop: "formId",
          type: FormType.ElSelect,
          options: []
        }
      ] as FormItemConfigGroup,
      customFormList: []
    }
  },
  computed: {

  },
  methods: {
    setAttrData(attrData: any) {
      this.attrData = attrData;
      (this.$refs.CustomFormAttr as BaseFormComponent).setFormData(attrData);
    },
    getCustomFormList() {
      customFormApi
        .find({})
        .then((res) => {
          const { code, content } = res.data;
          if (code === 0) {
            this.customFormList = content.result;
            this.formItemConfigGroup[1].options = this.customFormList.map((form: any) => {
              return {
                value: form.id,
                label: form.formName,
              }
            });
          }
        });
    },
    submitForm() {
      this.$emit("submitForm", this.attrData)
    }
  },
  created() {
    this.getCustomFormList()
  }

});
</script>

<style lang="scss" scoped>
.custom-form-attr {
  background: #fff;
  height: 100%;
}
</style>
